<template>
	<view class="wrap">
		<view class="head" :style="[{background: backgroundImage}]">
			<view>
				<view class="mi-title">我的</view>
				<view class="u-font-26">智能物联网支付管理平台</view>
			</view>
			<view class="m-flex-row" style="justify-content: flex-start;" @click="completeUserInfo()">
				<u-image v-if="!userInfo.headImgUrl" :src="`${baseStaticFileUrl}/image/my/head-portrait.svg`"
					width="126rpx" height="126rpx" radius="63rpx"></u-image>
				<u-image v-else :src="userInfo.headImgUrl" width="126rpx" height="126rpx" radius="63rpx"></u-image>

				<view class="info" v-if="!$u.test.isEmpty(userInfo.id)">

					<view v-if="!userInfo.mobile">
						<view style="color: rgba(255,255,255,1);">
							点击完善商户信息
						</view>
						<view class="u-font-26 u-flex-row" style="align-items: center;">
							<view class="info-img" @click.stop="toPage('/pages-my/setting/setting')">
								<view class="setting">
									<image class="img" :src="`${baseStaticFileUrl}/image/my/setting.svg`" />
									<view class="u-p-l-10">设置</view>
								</view>
							</view>
						</view>
					</view>

					<view v-else>
						<view style="color: rgba(255,255,255,1);">
							{{userInfo.name ? userInfo.name : ''}}
						</view>
						<view class="u-font-26 u-flex-row" style="align-items: center;">
							<u-image :src="`${baseStaticFileUrl}/image/my/phone-img.png`" width="16rpx" height="22rpx">
							</u-image>
							<view class="mi-phone">{{$u.test.isEmpty(userInfo.mobile) ? '' : userInfo.mobile}}</view>
							<view class="info-img" @click="toPage('/pages-my/setting/setting')">
								<view class="setting">
									<image class="img" :src="`${baseStaticFileUrl}/image/my/setting.svg`" />
									<view class="u-p-l-10">设置</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="info" v-else @click="$login.weiXinAppletLogin()">
					<view class="u-font-36" style="color: rgba(255,255,255,1);">登录/注册</view>
				</view>
			</view>
		</view>
		<view class="middle"
			v-if="assetsMenuList.length != 0 || brandMenuList.length != 0">
			<view class="capital-title">资产管理</view>
			<view class="fun" v-if="assetsMenuList.length != 0">
				<view class="fun-item" v-for="(item, assetManagementLevelIndex) in assetsMenuList"
					:key="assetManagementLevelIndex" @click="toPage(item.navUrl)">
					<image class="fun-item-icon" :src="baseStaticFileUrl+item.imgUrl" mode=""></image>
					<view class="fun-name">{{item.name}}</view>
				</view>
			</view>

			<view class="manage" v-if="brandMenuList.length != 0">
				<view class="manage-item" v-for="(item, assetManagementLevel2Index) in brandMenuList"
					:key="assetManagementLevel2Index" @click="toPage(item.navUrl)">
					<text :style="[{color: item.iconColor}]">{{item.name}}</text>
					<u--image class="item-img" :src="baseStaticFileUrl+item.imgUrl" width="336rpx" height="150rpx" />
				</view>
			</view>
		</view>
		<view class="bottom" v-if="toolMenuList.length != 0">
			<view class="title">我的工具</view>

			<view class="tool">
				<view class="tool">
					<view class="tool-item" v-for="(item, toolIndex) in toolMenuList" :key="toolIndex"
						@click="toPage(item.navUrl)">
						<view class="m-flex-row u-row-start">
							<u--image class="item-img " :src="baseStaticFileUrl+item.imgUrl" width="66rpx" height="66rpx" />
							<view class="u-m-l-10">{{item.name}}</view>
						</view>
						<text class="u-icon__icon"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-version" v-if="version" @click="versionClkCount++">
			<text>Version {{version}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					id: null,
					name: '',
					mobile: '',
				},
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				backgroundImage: 'url(' + this.$configPath.staticFileUrl +
					'/image/my/my_page_bg.png)  no-repeat 0rpx -70rpx;',
				// backgroundInfoImage: 'url(' + this.$configPath.staticFileUrl +
				// 	'/image/my/info-img.png)  no-repeat 0rpx 0rpx;',

				commonList: [],
				assetManagementLevel1MenuList: [],
				assetManagementLevel2MenuList: [],
				toolMenuList: [],
        brandMenuList: [],
        assetsMenuList: [],
				version: '', //版本号
				versionClkCount: 0,
			}
		},
		// 展示可以分享到朋友圈
		onShareTimeline(res) {},
		onLoad() {
			var userInfo = this.$store.getters.GET_VALUE("GET_USER_INFO")
			if (userInfo) {
				this.userInfo = userInfo;
			}
			const accountInfo = uni.getAccountInfoSync();
			this.version = accountInfo.miniProgram.version;
			this.findMyCenterMenu()
		},
		onShow() {
			//烧录 返回回来断开蓝牙连接
			this.$bluetooth.closeBluetoothAdapter();
		},
		watch: {
			'versionClkCount'(val, oldVal) {
				if (this.versionClkCount == 10){
					let userInfo = this.$store.getters.GET_VALUE("GET_USER_INFO")
					if (userInfo) {
						this.versionClkCount = 0;
						this.$helpers.toast("唯一ID：" + userInfo.id);
					}
				}
			},
		},
		methods: {
			completeUserInfo() {
				if (!this.userInfo.username && !this.userInfo.mobile) {
					uni.navigateTo({
						url: '/pages/complete-user-info/complete-user-info'
					})
				}
			},
			initMenu() {
				for (let i = 0; i < this.commonList.length; i++) {
					let item = this.commonList[i];
					item.imgUrl = this.$configPath.staticFileUrl + item.imgUrl;
					if (item.type == 4) {
						this.assetManagementLevel1MenuList.push(item);
					} else if (item.type == 9) {
						this.assetManagementLevel2MenuList.push(item);
					} else if (item.type == 5) {
						this.toolMenuList.push(item);
					}
				}
			},
			findMyCenterMenu() {

				let param = {
					types: [20,21,22],
          queryBranch:3,
				}

				this.$api('permissionGroupItem.findByPermissionGroupIdList', param).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
            this.toolMenuList = res.data.toolMenuList
            this.assetsMenuList = res.data.assetsMenuList
            this.brandMenuList = res.data.brandMenuList
					} else {
						this.$helpers.toast('查询菜单不成功：' + res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			toPage(url) {
				uni.navigateTo({
					url: url,
				});
			}
		}
	}
</script>

<style lang="scss">
	.u-icon__icon--info {
		color: #909399;
	}

	.u-icon__icon {
		font-family: uicon-iconfont;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 16px;
		line-height: 16px;
		font-weight: normal;
		top: 0px
	}

	text {
		cursor: text;
	}

	* {
		padding: 0rpx;
		margin: 0rpx;
	}

	.wrap {
		width: 100vw;
		height: 100vh;
		color: white;
		letter-spacing: 1rpx;

		.head {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
			box-sizing: border-box;
			padding: 60rpx 30rpx 40rpx;
			background-size: 100% !important;
			height: 412rpx;
			color: rgba(255, 255, 255, 0.8);

			.mi-title {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 50rpx;
			}

			.info {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				height: 110rpx;
				justify-content: space-around;

				.mi-phone {
					margin-left: 10rpx;
				}

				.info-img {
					position: absolute;
					top: 260rpx;
					right: 0rpx;
					width: 124rpx;
					border-radius: 35rpx 0 0 35rpx;
					background-color: rgba(255, 255, 255, 0.2);
					height: 70rpx;
					line-height: 70rpx;

					.setting {
						padding-left: 20rpx;
						display: flex;
						align-items: center;

						.img {
							width: 25rpx;
							height: 25rpx;
						}
					}

				}
			}
		}

		// 功能

		.middle {
			.capital-title {
				margin-top: 10rpx;
				color: rgba(0, 0, 0, 0.9);
				font-size: 34rpx;
				margin-left: 30rpx;
				line-height: 60rpx;
			}

			.fun {
				margin: 24rpx;
				border-radius: 20rpx;
				background: #ffffff;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				text-align: center;
				margin-top: 20rpx;
				grid-gap: 30rpx 0;

				.fun-item {
					padding: 40rpx;

					.fun-item-icon {
						width: 57rpx;
						height: 53rpx;
						margin-bottom: 12rpx;
					}

					.icon {
						width: 52rpx;
						height: 52rpx;
						margin-bottom: 12rpx;
					}

					.fun-name {
						font-size: $f-base;
						color: rgba(13, 13, 13, 0.9);
					}
				}

			}

			// 活动
			.manage {
				margin: 24rpx;
				border-radius: 20rpx;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.manage-item {
					width: 336rpx;
					height: 150rpx;
					position: relative;

					text {
						position: absolute;
						top: 50rpx;
						left: 40rpx;
						z-index: 100;
						font-size: 28rpx;
					}
				}

			}
		}

		.bottom {
			color: rgba(0, 0, 0, 0.9);
			font-size: 34rpx;
			line-height: 60rpx;
			// height: 402rpx;
			border-radius: 15rpx;

			.title {
				margin-left: 30rpx;
			}

			.tool {
				margin: 24rpx;
				background-color: white;
				border-radius: 30rpx;
				font-size: $f-base;

				.tool-item {
					border-bottom: 0.01rem solid rgba(239, 239, 239, 0.6);
					margin: 0rpx 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					height: 134rpx;
					line-height: 134rpx;
				}

			}

		}

		.footer-version {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			padding: 50rpx 0;
		}

	}
</style>
